<template>
	<view class="title-wrap flex flex-middle" :class="[align, titleType]" hover-class="u-active" @click.stop="onClick">
		<view class="title flex-item">{{ title }}</view>
		<view v-if="!onlyTitle" class="right-handle flex-item"><slot></slot></view>
	</view>
</template>

<script>
export default {
	name: 'titles',
	props: {
		title: {
			type: String,
			default: ''
		},
		dynamicString: {
			type: String,
			default: undefined
		},
		align: {
			type: String,
			default: 'left'
		},
		onlyTitle: {
			type: [Boolean, String],
			default: false
		},
		titleType: {
			type: String,
			default: 'block-title'
		}
	},
	computed: {
		// titles: function({ title, dynamicString }) {
		// 	let s = title;
		// 	console.log(title, dynamicString, "1111111111111111111111111111111111111111111111111111111");
		// 	if (dynamicString != undefined) {
		// 		s = `${title} ${dynamicString}`;
		// 	}
		// 	return s;
		// }
	},
	data() {
		return {
			id: 1
		};
	},
	methods: {
		onClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
.title-wrap {
	padding: 40upx 0;
	&.left {
		text-align: left;
	}
	&.center {
		text-align: center;
	}
	.right-handle {
		text-align: right;
		white-space: nowrap;
		font-size: 28upx;
	}
}

.block-title {
	.title {
		position: relative;
		font-size: 36upx;
		color: #333;
		&::before {
			content: '';
			display: inline-block;
			margin-right: 20upx;
			margin-bottom: -6upx;
			width: 8upx;
			height: 38upx;
			background: #00a0e9;
		}
	}
}
.list-title {
	.title {
		color: #333;
	}
}
</style>
